<!-- src/components/StudentsManagement.vue -->
<template>
  <div class="students-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-actions">
        <div class="search-filter">
          <div class="search-box">
            <input v-model="searchForm.search" type="text" placeholder="搜索姓名/学号/手机/身份证" @input="debounceSearch"
              class="search-input" />
            <i class="icon-search"></i>
          </div>

          <select v-model="searchForm.gender" @change="handleSearch" class="filter-select">
            <option value="">全部性别</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>

          <select v-model="searchForm.is_verified" @change="handleSearch" class="filter-select">
            <option value="">全部状态</option>
            <option value="true">已认证</option>
            <option value="false">未认证</option>
          </select>

          <button @click="resetFilters" class="btn btn-secondary">重置</button>
        </div>

        <button @click="showCreateModal = true" class="btn btn-primary">
          <i class="icon-plus"></i>新增学员
        </button>
      </div>
    </div>

    <!-- 学员统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="icon-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.total || 0 }}</div>
          <div class="stat-label">总学员数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon verified">
          <i class="icon-check-circle"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.verified || 0 }}</div>
          <div class="stat-label">已认证学员</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active">
          <i class="icon-activity"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.active || 0 }}</div>
          <div class="stat-label">活跃学员</div>
        </div>
      </div>
    </div>

    <!-- 学员表格 -->
    <div class="table-container">
      <div class="table-header">
        <h3>学员列表</h3>
        <div class="table-actions">
          <button @click="exportStudents" class="btn btn-outline">
            <i class="icon-download"></i>导出
          </button>
        </div>
      </div>

      <div class="table-wrapper" v-loading="loading">
        <table class="data-table">
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>手机号</th>
              <th>身份证号</th>
              <th>地区</th>
              <th>学习时长</th>
              <th>荣誉数</th>
              <th>认证状态</th>
              <th>注册时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="student in students" :key="student.id">
              <td>{{ student.student_id }}</td>
              <td>
                <div class="student-info">
                  <!-- <img :src="student.avatar || '/default-avatar.png'" alt="头像" class="avatar-small" /> -->
                  <span>{{ student.name }}</span>
                </div>
              </td>
              <td>
                <span>
                  {{ student.gender }}
                </span>
              </td>
              <td>{{ student.phone }}</td>
              <td>{{ hideIdCard(student.id_card) }}</td>
              <td>{{ student.area.name }}</td>
              <td>{{ student.total_study_hours || 0 }}小时</td>
              <td>{{ student.honors_count || 0 }}</td>
              <td>
                <span class="status-badge" :class="{ verified: student.is_verified }">
                  {{ student.is_verified ? '已认证' : '未认证' }}
                </span>
              </td>
              <td>{{ formatDate(student.created_at) }}</td>
              <td>
                <div class="action-buttons">
                  <button @click="viewStudent(student)" class="btn-icon" title="查看">
                    <i class="icon-eye"></i>
                  </button>
                  <!-- <button @click="editStudent(student)" class="btn-icon" title="编辑">
                    <i class="icon-edit"></i>
                  </button> -->
                  <button v-if="!student.is_verified" @click="verifyStudent(student.id)" class="btn-icon verify"
                    title="认证">
                    <i class="icon-check"></i>
                  </button>
                  <button @click="deleteStudent(student)" class="btn-icon danger" title="删除">
                    <i class="icon-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <div class="pagination-info">
          共 {{ total }} 条记录，第 {{ currentPage }}/{{ totalPages }} 页
        </div>
        <div class="pagination">
          <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1" class="pagination-btn">
            上一页
          </button>
          <span class="pagination-pages">
            <button v-for="page in visiblePages" :key="page" @click="changePage(page)"
              :class="['pagination-btn', { active: page === currentPage }]">
              {{ page }}
            </button>
          </span>
          <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages" class="pagination-btn">
            下一页
          </button>
        </div>
      </div>
    </div>

    <!-- 创建/编辑学员模态框 -->
    <div v-if="showCreateModal || showEditModal" class="modal-overlay" @click="closeModals">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h3>{{ showCreateModal ? '新增学员' : '编辑学员' }}</h3>
          <button @click="closeModals" class="modal-close">
            <i class="icon-x"></i>
          </button>
        </div>

        <div class="modal-body">
          <form @submit.prevent="saveStudent">
            <div class="form-group">
              <label>学号</label>
              <input v-model="studentForm.student_id" type="text" required readonly placeholder="系统自动生成"
                class="readonly-input" />

              <div class="form-group">
                <label>姓名</label>
                <input v-model="studentForm.name" type="text" required placeholder="请输入姓名" />
              </div>

              <div class="form-group">
                <label>性别</label>
                <select v-model="studentForm.gender" required>
                  <option value="">请选择性别</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>

              <div class="form-group">
                <label>手机号</label>
                <input v-model="studentForm.phone" type="tel" required placeholder="请输入手机号" />
              </div>

              <div class="form-group">
                <label>微信号</label>
                <input v-model="studentForm.wechat" type="text" required placeholder="请输入微信号" />
              </div>

              <div class="form-group">
                <label>身份证号</label>
                <input v-model="studentForm.id_card" type="text" required placeholder="请输入身份证号" />
              </div>

              <div class="form-group">
                <label>地址</label>
                <select v-model="studentForm.area_id" required>
                  <option value="">请选择您的地址</option>
                  <option value="101">北京市</option>
                  <option value="102">上海市</option>
                  <option value="103">天津市</option>
                  <option value="104">重庆市</option>
                  <option value="105">河北省</option>
                  <option value="106">山西市</option>
                  <option value="107">内蒙古自治区</option>
                  <option value="108">辽宁省</option>
                  <option value="109">吉林省</option>
                  <option value="110">黑龙江省</option>
                  <option value="111">江苏省</option>
                  <option value="112">浙江省</option>
                  <option value="113">安徽省</option>
                  <option value="114">福建省</option>
                  <option value="115">江西省</option>
                  <option value="116">山东省</option>
                  <option value="117">河南省</option>
                  <option value="118">湖北省</option>
                  <option value="119">湖南省</option>
                  <option value="120">广东省</option>
                </select>
              </div>

              <div class="form-group">
                <label>出生日期</label>
                <input v-model="studentForm.birthday" type="date" :max="today" placeholder="请选择出生日期" />
              </div>
              <!-- 在表单中添加认证状态字段（隐藏） -->
              <input type="hidden" v-model="studentForm.is_verified" />

              <div class="form-group">
                <label>紧急联系人</label>
                <input v-model="studentForm.emergency_contact" type="text" required placeholder="请输入紧急联系人姓名" />
              </div>

              <div class="form-group">
                <label>紧急联系电话</label>
                <input v-model="studentForm.emergency_phone" type="tel" required placeholder="请输入紧急联系电话" />
              </div>

              <div class="form-group">
                <label>来源</label>
                <select v-model="studentForm.source_id" required>
                  <option value="">请选择您的来源</option>
                  <option value="130">线上推广</option>
                  <option value="131">朋友推荐</option>
                  <option value="132">机构招生</option>
                  <option value="133">政府推荐</option>
                  <option value="134">自我报名</option>
                </select>
              </div>

              <div class="form-group full-width">
                <label>工作经历</label>
                <textarea v-model="studentForm.work_experience" placeholder="请输入工作经历" rows="3"></textarea>
              </div>

              <div class="form-group full-width">
                <label>备注</label>
                <textarea v-model="studentForm.notes" placeholder="请输入备注信息" rows="2"></textarea>
              </div>

              <!-- <div class="form-group">
                <label>邮箱</label>
                <input
                  v-model="studentForm.email"
                  type="email"
                  placeholder="请输入邮箱"
                />
              </div> -->
            </div>

            <!-- <div class="form-group full-width">
              <label>头像URL</label>
              <input
                v-model="studentForm.avatar"
                type="url"
                placeholder="请输入头像URL"
              />
            </div>
             -->
            <div class="modal-footer">
              <button type="button" @click="closeModals" class="btn btn-secondary">取消</button>
              <button type="submit" class="btn btn-primary" :disabled="saving">
                {{ saving ? '保存中...' : '保存' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 学员详情模态框 -->
    <div v-if="showDetailModal" class="modal-overlay" @click="showDetailModal = false">
      <div class="modal modal-large" @click.stop>
        <div class="modal-header">
          <h3>学员详情</h3>
          <button @click="showDetailModal = false" class="modal-close">
            <i class="icon-x"></i>
          </button>
        </div>

        <div class="modal-body">
          <div class="student-detail" v-if="selectedStudent">
            <div class="detail-header">
              <!-- <img :src="selectedStudent.avatar || '/default-avatar.png'" alt="头像" class="avatar-large" /> -->
              <div class="basic-info">
                <h4>{{ selectedStudent.name }}</h4>
                <p>学号：{{ selectedStudent.student_id }}</p>
                <p>手机：{{ selectedStudent.phone }}</p>
                <span class="status-badge" :class="{ verified: selectedStudent.is_verified }">
                  {{ selectedStudent.is_verified ? '已认证' : '未认证' }}
                </span>
              </div>
            </div>

            <div class="detail-content">
              <div class="detail-section">
                <h5>基本信息</h5>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>性别：</label>
                    <span>{{ selectedStudent.gender }}</span>
                  </div>
                  <div class="detail-item">
                    <label>身份证号：</label>
                    <span>{{ hideIdCard(selectedStudent.id_card) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>出生日期：</label>
                    <span>{{ selectedStudent.birthday

                      || '-' }}</span>
                  </div>
                  <!-- <div class="detail-item">
                    <label>邮箱：</label>
                    <span>{{ selectedStudent.email || '-' }}</span>
                  </div> -->
                  <div class="detail-item">
                    <label>地区：</label>
                    <span>{{ selectedStudent.area.name || '-' }}</span>
                  </div>

                  <div class="detail-item">
                    <label>注册时间：</label>
                    <span>{{ formatDate(selectedStudent.created_at) }}</span>
                  </div>
                </div>
              </div>

              <div class="detail-section">
                <h5>学习统计</h5>
                <div class="stats-grid-small">
                  <div class="stat-item">
                    <div class="stat-number">{{ selectedStudent.total_study_hours || 0 }}</div>
                    <div class="stat-label">学习小时</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-number">{{ selectedStudent.honors_count || 0 }}</div>
                    <div class="stat-label">获得荣誉</div>
                  </div>
                </div>

                <div class="action-buttons-detail">
                  <button @click="updateStudyHours" class="btn btn-outline">
                    <i class="icon-clock"></i>更新学时
                  </button>
                  <button @click="updateHonors" class="btn btn-outline">
                    <i class="icon-award"></i>更新荣誉
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { studentAPI } from '@/services/api'

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const students = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const lastStudentId = ref('')


// 搜索表单
const searchForm = reactive({
  search: '',
  gender: '',
  is_verified: '',
  area_id: null
})

// 获取当天日期（YYYY-MM-DD格式）
const today = computed(() => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

// 模态框状态
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showDetailModal = ref(false)
const selectedStudent = ref(null)

// 学员表单
const studentForm = reactive({
  student_id: '',
  name: '',
  gender: '',
  phone: '',
  id_card: '',
  area_id: '',
  area_name: '',
  birthday: today.value,
  email: '',
  avatar: '',
  is_verified: 0,
  wechat: '',              // 新增微信号
  emergency_contact: '',   // 新增紧急联系人
  emergency_phone: '',     // 新增紧急联系人电话
  work_experience: '',     // 新增工作经历
  notes: '',
  source_id: '',
})

// 统计数据
const statistics = ref({
  total: 0,
  verified: 0,
  active: 0
})

// 计算属性
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
const visiblePages = computed(() => {
  const pages = []
  const maxVisible = 5
  const start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2))
  const end = Math.min(totalPages.value, start + maxVisible - 1)

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

// 防抖搜索
let searchTimeout = null
const debounceSearch = () => {
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    handleSearch()
  }, 500)
}

// 方法
const fetchStudents = async () => {
  loading.value = true
  try {
    const params = {
      skip: (currentPage.value - 1) * pageSize.value,
      limit: pageSize.value,
      ...searchForm
    }

    // 清除空值
    Object.keys(params).forEach(key => {
      if (params[key] === '' || params[key] === null) {
        delete params[key]
      }
    })

    const response = await studentAPI.getStudents(params)
    students.value = response.items
    total.value = response.total

    // 记录最后一个学生的学号
    if (students.value.length > 0) {
      lastStudentId.value = students.value[0].student_id; // 改为获取第一个学生的学号
    }

    // 更新统计
    updateStatistics()
  } catch (error) {
    console.error('获取学员列表失败:', error)
    // 这里可以添加错误提示
  } finally {
    loading.value = false
  }
}

const generateNextStudentId = () => {
  if (!lastStudentId.value) return 'S000001' // 如果没有学生，从S000001开始

  // 提取数字部分并加1
  const numPart = lastStudentId.value.match(/\d+/)?.[0] || '000000'
  const nextNum = parseInt(numPart) + 1
  // 格式化为6位数，前面补0
  const paddedNum = String(nextNum).padStart(6, '0')
  return `S${paddedNum}`
}

const updateStatistics = () => {
  statistics.value = {
    total: total.value,
    verified: students.value.filter(s => s.is_verified).length,
    active: students.value.filter(s => s.study_hours > 0).length
  }
}

const handleSearch = () => {
  currentPage.value = 1
  fetchStudents()
}

const resetFilters = () => {
  Object.assign(searchForm, {
    search: '',
    gender: '',
    is_verified: '',
    area_id: null
  })
  handleSearch()
}

const changePage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
    fetchStudents()
  }
}

const viewStudent = async (student) => {
  try {
    const response = await studentAPI.getStudent(student.id)
    selectedStudent.value = response
    showDetailModal.value = true
  } catch (error) {
    console.error('获取学员详情失败:', error)
  }
}

// const editStudent = (student) => {
//   Object.assign(studentForm, {
//     student_id: student.student_id,
//     name: student.name,
//     gender: student.gender,
//     phone: student.phone,
//     id_card: student.id_card,
//     area_id: student.area_id,
//     birth_date: student.birth_date,
//     email: student.email,
//     avatar: student.avatar
//   })
//   selectedStudent.value = student
//   showEditModal.value = true
// }

const saveStudent = async () => {
  saving.value = true
  try {
    if (showCreateModal.value) {
      await studentAPI.createStudent(studentForm)
    } else {
      await studentAPI.updateStudent(selectedStudent.value.id, studentForm)
    }

    closeModals()
    fetchStudents()
    // 这里可以添加成功提示
  } catch (error) {
    console.error('保存学员失败:', error)
    // 这里可以添加错误提示
  } finally {
    saving.value = false
  }
}

const deleteStudent = async (student) => {
  if (confirm(`确定要删除学员 ${student.name} 吗？`)) {
    try {
      await studentAPI.deleteStudent(student.id)
      fetchStudents()
      // 这里可以添加成功提示
    } catch (error) {
      console.error('删除学员失败:', error)
      // 这里可以添加错误提示
    }
  }
}

const verifyStudent = async (studentId) => {
  try {
    await studentAPI.verifyStudent(studentId)
    fetchStudents()
    // 这里可以添加成功提示
  } catch (error) {
    console.error('认证学员失败:', error)
    // 这里可以添加错误提示
  }
}

const updateStudyHours = async () => {
  const hours = prompt('请输入要增加的学习时长（小时）:')
  if (hours && !isNaN(hours) && hours > 0) {
    try {
      await studentAPI.updateStudyHours(selectedStudent.value.id,  parseInt(hours))
      // 刷新详情
      viewStudent(selectedStudent.value)
      fetchStudents()
      // 这里可以添加成功提示
    } catch (error) {
      console.error('更新学习时长失败:', error)
    }
  }
}

const updateHonors = async () => {
  const count = prompt('请输入要增加的荣誉数量:')
  if (count && !isNaN(count) && count > 0) {
    try {
      await studentAPI.updateHonors(selectedStudent.value.id, parseInt(count))
      // 刷新详情
      viewStudent(selectedStudent.value)
      fetchStudents()
      // 这里可以添加成功提示
    } catch (error) {
      console.error('更新荣誉数量失败:', error)
    }
  }
}

const closeModals = () => {
  showCreateModal.value = false
  showEditModal.value = false
  selectedStudent.value = null
  // 重置表单
  Object.assign(studentForm, {
    student_id: '',
    name: '',
    gender: '',
    phone: '',
    id_card: '',
    area_id: null,
    birth_date: '',
    email: '',
    avatar: ''
  })
}

const exportStudents = () => {
  // 导出功能实现
  console.log('导出学员数据')
}

const hideIdCard = (idCard) => {
  if (!idCard) return '-'
  // 匹配18位（允许最后一位是X）或15位身份证
  return idCard.replace(/(\d{4})\d{10}(\w{4})/, '$1**********$2')
    || idCard.replace(/(\d{4})\d{7}(\w{3}|\d{3})/, '$1*******$2')
}

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

watch(showCreateModal, (newVal) => {
  if (newVal) {
    studentForm.student_id = generateNextStudentId()
  }
})

// 生命周期
onMounted(() => {
  fetchStudents()
})
</script>

<style scoped>
.students-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.search-filter {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-box {
  position: relative;
}

.search-input {
  width: 300px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.search-box .icon-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.stat-icon.verified {
  background: #10B981;
}

.stat-icon.active {
  background: #F59E0B;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1F2937;
}

.stat-label {
  color: #6B7280;
  font-size: 14px;
}

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-header {
  padding: 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-header h3 {
  margin: 0;
  color: #1F2937;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #E5E7EB;
}

.data-table th {
  background: #F9FAFB;
  font-weight: 600;
  color: #374151;
}

.student-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.gender-tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.gender-tag.male {
  background: #DBEAFE;
  color: #1E40AF;
}

.gender-tag.female {
  background: #FCE7F3;
  color: #BE185D;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #FEF3C7;
  color: #92400E;
}

.status-badge.verified {
  background: #D1FAE5;
  color: #065F46;
}

.action-buttons {
  display: flex;
  gap: 4px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background: #F3F4F6;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #E5E7EB;
  color: #374151;
}

.btn-icon.verify {
  background: #D1FAE5;
  color: #065F46;
}

.btn-icon.verify:hover {
  background: #A7F3D0;
}

.btn-icon.danger {
  background: #FEE2E2;
  color: #DC2626;
}

.btn-icon.danger:hover {
  background: #FECACA;
}

.pagination-wrapper {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #E5E7EB;
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-btn {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: #F3F4F6;
}

.pagination-btn.active {
  background: #4F46E5;
  color: white;
  border-color: #4F46E5;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-large {
  max-width: 800px;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #1F2937;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6B7280;
}

.modal-body {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-group input,
.form-group select {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: #4F46E5;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #4338CA;
}

.btn-secondary {
  background: #F3F4F6;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.btn-secondary:hover {
  background: #E5E7EB;
}

.btn-outline {
  background: white;
  color: #4F46E5;
  border: 1px solid #4F46E5;
}

.btn-outline:hover {
  background: #4F46E5;
  color: white;
}

.student-detail {
  max-width: 100%;
}

.detail-header {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E7EB;
}

.avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.basic-info h4 {
  margin: 0 0 8px 0;
  color: #1F2937;
}

.basic-info p {
  margin: 4px 0;
  color: #6B7280;
  font-size: 14px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h5 {
  margin: 0 0 16px 0;
  color: #1F2937;
  font-size: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  gap: 8px;
}

.detail-item label {
  font-weight: 500;
  color: #6B7280;
  min-width: 80px;
}

.stats-grid-small {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
}

.stat-item .stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #1F2937;
}

.stat-item .stat-label {
  font-size: 12px;
  color: #6B7280;
  margin-top: 4px;
}

.action-buttons-detail {
  display: flex;
  gap: 12px;
}

.readonly-input {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

textarea:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .search-filter {
    flex-wrap: wrap;
  }

  .search-input {
    width: 100%;
  }

  .stats-cards {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }


}
</style>